<!doctype html>
<html>
<head>

    <title>jsPlumb - groups demonstration</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

    <link rel="stylesheet" href="../../css/jsPlumbToolkit-defaults.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/jsPlumbToolkit-demo.css">
    <link rel="stylesheet" href="demo.css">

</head>

<body data-demo-id="groups">

<div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="/">DEMOS</a></li>
                <li><a href="/doc/home.html">DOCS</a></li>
                <li><a href="/download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>
            </ul>

            <div class="apidoc-jsplumb-logo"><div class="container"><img src="/img/logo-docs-jsplumb.png"></div></div>

            <div class="social-nav hidden-xs">
                <!--a href="#" class="link"><span class="icon-facebook"></span></a-->
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

    <div class="jtk-demo-main">
        <!-- demo -->
        <div class="jtk-demo-canvas canvas-wide flowchart-demo jtk-surface jtk-surface-nopan" id="canvas">

            <div class="group-container" id="container1" group="one">
                <div class="title"></div>
                <ul>
                    <li>Elements constrained to group (<strong>constrain:true</strong>)</li>
                    <li>Elements are draggable to other groups </li>
                    <li>Deletes group and children</li>
                    <li>Not droppable (<strong>droppable:false</strong>)</li>
                </ul>
                <div class="del" delete-all></div>
                <div class="node-collapse"></div>
                <div id="c1_1" class="w" style="left:30px;top:35px">1.1</div>
                <div id="c1_2" class="w" style="left:160px;top:140px">1.2</div>
            </div>

            <div class="group-container" id="container2" group="two">
                <div class="title"></div>
                <ul>
                    <li>Elements are reverted on drop outside (<strong>revert:true</strong>)</li>
                    <li>Elements not draggable to other groups (<strong>dropOverride:true</strong>)</li>
                    <li>Deletes group only</li>
                </ul>
                <div class="del"></div>
                <div class="node-collapse"></div>
                <div id="c2_1" class="w" style="left:30px;top:40px">2.1</div>
                <div id="c2_2" class="w" style="left:150px;top:160px">2.2</div>
            </div>

            <div class="group-container" id="container3" group="three">
                <div class="title"></div>
                <ul>
                    <li>Elements may be dragged outside bounds (<strong>revert:false</strong>)</li>
                    <li>Elements are draggable to other groups</li>
                    <li>Deletes group only</li>
                </ul>
                <div class="del"></div>
                <div class="node-collapse"></div>
                <div id="c3_1" class="w" style="left:30px;top:35px">3.1</div>
                <div id="c3_2" class="w" style="left:80px;top:162px">3.2</div>
            </div>

            <div class="group-container" id="container4" group="four">
                <div class="title"></div>
                <ul>
                    <li>Elements pruned on drop outside (<strong>prune:true</strong>)</li>
                    <li>Elements are draggable to other groups</li>
                    <li>Deletes group and children</li>
                </ul>
                <div class="del" delete-all></div>
                <div class="node-collapse"></div>
                <div id="c4_1" class="w" style="left:30px;top:35px">4.1</div>
                <div id="c4_2" class="w" style="left:110px;top:150px">4.2</div>
            </div>

            <div class="group-container" id="container5" group="five">
                <div class="title"></div>
                <ul>
                    <li>Elements orphaned on drop outside (<strong>orphan:true</strong>)</li>
                    <li>Elements are draggable to other groups</li>
                    <li>Deletes group only</li>
                    <li>Not droppable (<strong>droppable:false</strong>)</li>
                </ul>
                <div class="del"></div>
                <div class="node-collapse"></div>
                <div id="c5_1" class="w" style="left:30px;top:35px">5.1</div>
                <div id="c5_2" class="w" style="left:140px;top:130px">5.2</div>
            </div>

            <div class="group-container" id="container6" group="six">
                <div class="title"></div>
                <ul>
                    <li>No connections shown when group collapsed (<strong>proxied:false</strong>)</li>
                    <li>Elements are draggable to other groups</li>
                    <li>Deletes group and children</li>
                </ul>
                <div class="del" delete-all></div>
                <div class="node-collapse"></div>
                <div id="c6_1" class="w" style="left:160px;top:45px">6.1</div>
                <div id="c6_2" class="w" style="left:30px;top:150px">6.2</div>
            </div>

            <div class="group-container" id="container7" group="seven">
                <div class="title"></div>
                <ul>
                    <li>Elements are draggable to other groups, using ghost proxy (<strong>ghost:true</strong>)</li>
                    <li>Deletes group and children</li>
                </ul>
                <div class="del" delete-all></div>
                <div class="node-collapse"></div>
                <div id="c7_1" class="w" style="left:30px;top:35px">7.1</div>
                <div id="c7_2" class="w" style="left:90px;top:150px">7.2</div>
            </div>

            <div class="w" id="standalone" style="left:455px;top:280px" title="drag me into a group. if you want to.">?</div>

            <div class="events"><h3>Events</h3><div id="events"></div></div>
        </div>
        <!-- /demo -->
        <!-- explanation -->
        <div class="description">
            <h4>GROUPS</h4>
            <p>Demonstrates all of the ways you can use Groups.</p>
        </div>
        <!-- /explanation -->
    </div>


<!-- JS -->
<!-- support lib for bezier stuff -->
<script src="../../lib/jsBezier-0.8.js"></script>
<!-- event adapter -->
<script src="../../lib/mottle-0.7.4.js"></script>
<!-- geometry functions -->
<script src="../../lib/biltong-0.3.js"></script>
<!-- drag -->
<script src="../../lib/katavorio-0.18.0.js"></script>
<!-- jsplumb util -->
<script src="../../src/util.js"></script>
<script src="../../src/browser-util.js"></script>
<!-- main jsplumb engine -->
<script src="../../src/jsPlumb.js"></script>
<!-- base DOM adapter -->
<script src="../../src/dom-adapter.js"></script>
<script src="../../src/overlay-component.js"></script>
<!-- endpoint -->
<script src="../../src/endpoint.js"></script>
<!-- connection -->
<script src="../../src/connection.js"></script>
<!-- anchors -->
<script src="../../src/anchors.js"></script>
<!-- connectors, endpoint and overlays  -->
<script src="../../src/defaults.js"></script>
<!-- bezier connectors -->
<script src="../../src/connectors-bezier.js"></script>
<!-- state machine connectors -->
<script src="../../src/connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="../../src/connectors-flowchart.js"></script>
<!-- straight connectors -->
<script src="../../src/connectors-straight.js"></script>
<!-- SVG renderer -->
<script src="../../src/renderers-svg.js"></script>

<!-- common adapter -->
<script src="../../src/base-library-adapter.js"></script>
<!-- no library jsPlumb adapter -->
<script src="../../src/dom.jsPlumb.js"></script>

<script src="../../src/group.js"></script>
<script src="demo.js"></script>

</body>

</html>